import React, { useState, useEffect } from 'react';
import { Layout, Menu, Card, Table, Statistic, Button, Typography, Tabs, Row, Col } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { Link, useLocation } from 'react-router-dom';
import SideMenu from '../components/SideMenu';  // 新增导入

const { Header, Content, Sider } = Layout;
const { Title } = Typography;
const { TabPane } = Tabs;

const duizhangZhongxin = () => {
    const [sellerData] = useState({ storeName: 'FENGDEKUN' });
    const [activeMenuKey, setActiveMenuKey] = useState('12');  // 修改：使用对账中心的key '12'
    const location = useLocation();

    useEffect(() => {
        if (location.pathname === '/reconciliation-center') {
            setActiveMenuKey('12');  // 修改：同步为'12'
        }
    }, [location]);

    const handleMenuItemClick = (e) => {
        setActiveMenuKey(e.key);
    };

    const columns = [
        { title: '账务时间', dataIndex: 'date', key: 'date' },
        { title: '账务类型', dataIndex: 'type', key: 'type' },
        { title: '收支金额(CNY)', dataIndex: 'amount', key: 'amount' },
        { title: '币种', dataIndex: 'currency', key: 'currency' },
        { title: '备注', dataIndex: 'note', key: 'note' },
        { title: '操作', dataIndex: 'action', key: 'action' },
    ];

    const data = [
        { date: '2024-06-25 01:44:50', type: '结算', amount: '+¥59.00', currency: 'CNY', note: '-', action: '查看详情' },
        { date: '2024-06-25 01:44:50', type: '结算', amount: '-¥546.00', currency: 'CNY', note: '仓储综合服务费', action: '查看详情' },
    ];

    const menuItems = [
        { key: 'sub1', label: <span><UserOutlined />首页</span>, children: [] },
        // ... other menu items ...
        {
            key: 'sub5',
            label: <span><LaptopOutlined />结算管理</span>,
            children: [
                { key: '11', label: <Link to="/fund-center">资金中心</Link> },
                // 修改3：为对账中心添加路由链接
                { key: '12', label: <Link to="/reconciliation-center">对账中心</Link> },
                { key: '13', label: '资金限制' },
                { key: '14', label: '结算数据' },
            ],
        },
        // ... other menu items ...
    ];

    return (
        <Layout>
            <Sider width={200} style={{ background: '#fff' }}>
                <SideMenu 
                    activeMenuKey={activeMenuKey} 
                    onMenuItemClick={handleMenuItemClick}  // 传递点击事件处理器
                />
                <div style={{ position: 'absolute', bottom: 10, width: '180px' }}>
                    <Button type="primary" block style={{ backgroundColor: '#ff6600', color: 'white', border: 'none' }}>
                        卖家中心
                    </Button>
                </div>
            </Sider>

            <Layout>
                <Header style={{ background: '#fff', padding: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '64px' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Title level={5} style={{ color: '#ff6600', fontWeight: 'bold', marginRight: '10px' }}>DUK</Title>
                            <Title level={5} style={{ color: '#666' }}>跨境卖家</Title>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Card style={{ background: '#ff6600', color: 'white', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                Seller Central
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                运营对接
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                反馈提交
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px' }}>
                                {sellerData.storeName}
                            </Card>
                        </div>
                    </div>
                </Header>

                <Content style={{ padding: '0 50px' }}>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="账务明细" key="1">
                            <Row gutter={16}>
                                <Col span={6}>
                                    <Statistic title="收入金额(CNY)" value="+¥286.00" />
                                </Col>
                                <Col span={6}>
                                    <Statistic title="收入笔数" value="5" />
                                </Col>
                                <Col span={6}>
                                    <Statistic title="支出金额(CNY)" value="-¥286.00" />
                                </Col>
                                <Col span={6}>
                                    <Statistic title="支出笔数" value="2" />
                                </Col>
                            </Row>
                            <Table columns={columns} dataSource={data} rowKey="id" />
                        </TabPane>
                        <TabPane tab="日汇总" key="2">
                            日汇总内容
                        </TabPane>
                        <TabPane tab="月汇总" key="3">
                            月汇总内容
                        </TabPane>
                    </Tabs>
                </Content>
            </Layout>
        </Layout>
    );
};

export default duizhangZhongxin;